window._AMapSecurityConfig = {
  securityJsCode: 'ba27be2ac16aa496722783fbfb2020bf',
}

import AMapLoader from '@amap/amap-jsapi-loader'
import { polygonJson, center, townList, boundaryjson } from '@/data/map'

class Map {
  constructor(container, options = {}) {
    this.container = container
    this.options = options
    this.config = {
      bgHover: '#009ad6',
      bg: '#0249c6',
      border: '#03c1d1',
    }

    if (window.AMap == undefined) {
      AMapLoader.load({
        //首次调用 load
        key: '3f7aa1ed270ffb4d10cf26afb0f9c1e7', //首次load key为必填
        version: '2.0',
        plugins: [
          'Map3D',
          'AMap.MarkerClusterer',
          'AMap.MouseTool',
          'AMap.DistrictSearch',
          'AMap.GeoJSON',
          'AMap.MarkerCluster',
          // 'AMap.Object3D',
          // 'AMap.Object3DLayer',
          ,
        ],
        AMapUI: {
          plugins: ['overlay/SimpleMarker'],
        },
      }).then(AMap => {
        this.initMap()
      })
    } else {
      this.initMap()
    }
  }

  initMap() {
    this.map = new AMap.Map(this.container, {
      viewMode: '3D',
      pitch: 30,
      center,
      mapStyle: 'amap://styles/blue',
      zoom: this.options.zoom,
    })
  }

  // 清除地图
  clearMap() {
    // this.map.add(
    //   new AMap.TileLayer.RoadNet({
    //     rejectMapMask: true,
    //   })
    // )
    this.map.clearMap() // 清除所有覆盖物
    if (this.cluster) this.cluster.setMap(null)

    // this.map.setMask(null)
    // this.map.setLabelRejectMask(true)

    // this.object3Dlayer.clear()
    // this.map.remove(this.object3Dlayer)
  }

  polygon(townItem, ponit) {
    this.map.setZoom(13)
    this.map.setZooms([8, 20])
    // this.map.setFeatures(['bg', 'point', 'road', 'building'])
    this.map.setCenter(townItem.center)

    ponit.map(item => {
      let polygon = new AMap.Polygon({
        map: this.map, // 指定地图对象
        strokeWeight: 1, // 轮廓线宽度
        path: item, //轮廓线的节点坐标数组
        fillOpacity: 0.15, //透明度
        fillColor: '#256edc', //填充颜色
        strokeColor: '#256edc', //线条颜色
      })
    })

    // this.map.setFitView()
  }

  // 添加点标记
  addPointMark(data) {
    // const points = []
    // for (const key in data) {
    //   const item = data[key]
    //   item['村数据'].map(item => {
    //     points.push({ weight: 1, lnglat: item['行政村坐标'].split(','), data: item })
    //   })
    // }
    const points =
      data.map(item => {
        return {
          weight: 1,
          lnglat: item?.lnglat || [],
          data: item,
        }
      }) || []

    var count = points.length
    // 数据中增加权重信息，以权重高的点为中心进行聚合
    // 本示例中北京等城市中心点权重较高
    let bgColor
    var _renderClusterMarker = function (context) {
      // 聚合中点个数
      var clusterCount = context.count
      var div = document.createElement('div')
      // 聚合点配色
      var defaultColor = ['204,235,197', '168,221,181', '123,204,196', '78,179,211', '43,140,190']
      if (clusterCount >= 0 && clusterCount < 10) {
        bgColor = defaultColor[0]
      } else if (clusterCount >= 10 && clusterCount < 100) {
        bgColor = defaultColor[1]
      } else if (clusterCount >= 100 && clusterCount < 1000) {
        bgColor = defaultColor[2]
      } else if (clusterCount >= 1000 && clusterCount < 10000) {
        bgColor = defaultColor[3]
      } else if (clusterCount >= 10000) {
        bgColor = defaultColor[4]
      }
      div.style.backgroundColor = 'rgba(' + bgColor + ',.5)'
      var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40)
      div.style.width = div.style.height = size + 'px'
      div.style.border = 'solid 1px rgba(' + bgColor + ',1)'
      div.style.borderRadius = size / 2 + 'px'
      div.innerHTML = context.count
      div.style.lineHeight = size + 'px'
      div.style.color = '#ffffff'
      div.style.fontSize = '12px'
      div.style.textAlign = 'center'
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
      context.marker.setContent(div)
    }
    var _renderMarker = function (context) {
      var content =
        '<div style="background-color: rgba(255,255,178,.9); height: 18px; width: 18px; border: 1px solid rgba(255,255,178,1); border-radius: 12px; box-shadow: rgba(0, 0, 0, 1) 0px 0px 3px;"></div>'

      // const src = getFileUrl('map/point.png')
      // const content = `
      //   <img src="${src}" style=" width: 25px; height: 25px; ">
      // `
      var offset = new AMap.Pixel(-9, -9)
      context.marker.setContent(content)
      context.marker.setOffset(offset)
    }
    this.cluster = new AMap.MarkerCluster(this.map, points, {
      gridSize: 30, // 聚合网格像素大小
      renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
      renderMarker: _renderMarker, // 自定义非聚合点样式
    })

    this.cluster.on('click', (cluster, lnglat, target, marker) => {
      if (cluster.clusterData.length == 1) {
        const data = cluster.clusterData[0].data
        if (this.options.hamletPointOnClick) this.options.hamletPointOnClick(data)
      } else {
        this.map.setZoom(this.map.getZoom() + 1)
        this.map.setCenter(cluster.lnglat)
      }
    })
  }
}

export default Map
